// 将多行文本框变成富文本域 直接调用老师封装好的就行
initEditor();

// 页面处理 获取分类
axios.get('/my/category/list').then(res => {
    //console.log(res);
    let { status, data } = res.data;
    if (status === 0) {
        let str = '';
        data.forEach(item => {
            str += `<option value="${item.id}">${item.name}</option>`;
        });
        // 把 option 放到 select 中
        $('select[name=cata_id]').append(str);
        // 更新渲染
        let form = layui.form;
        form.render('select');
    }
})

// ------------------ 处理封面图片 -----------------------
// 1. 初始化剪裁框
// 初始化图片剪裁器
var $image = $('#image')
// 剪裁选项
var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
}
// 初始化剪裁区域
$image.cropper(options);
// 2. 点击 “选择封面” 能够选择图片
$('button:contains("选择封面")').click(function () {
    $('#file').trigger('click');
})
// 3. 图片切换的时候，更换剪裁区的图片
$('#file').change(function () {
    if (this.files.length > 0) {
        // 找到文件对象
        var fileObj = this.files[0];
        // 创建 url
        var url = URL.createObjectURL(fileObj);
        // 更改图片
        $image.cropper('replace', url);
    }
})

// ------------------ 提交表单 收集数据 ajax提交 完后添加 -----------------
$('form').on('submit', function (e) {
    e.preventDefault();
    let fd = new FormData(this);
    // 修改 content
    fd.set('content', tinyMCE.activeEditor.getContent());
    // 对于图片来说，需要剪裁，剪裁之后，转成文件对象格式，追加到fd中
    let canvas = $image.cropper('getCroppedCanvas', { width: 400, height: 200 });
    // 把 canvas 转换文件对象格式
    canvas.toBlob(function (blob) {
        fd.append('cover_img', blob); // blob对象，追加到fd中之后，就会转成文件对象
        // ajax 提交
        axios.post('/my/article/add', fd).then(res => {
            let { status, message } = res.data;
            if (status == 0) {
                layer.msg(message)
            }
        })
    })
})